<template>
	<view class="page">

			<view class="update-item">
				<view class="update-title">
					<view>
						旧 密 码 :
					</view>
					<input type="text" placeholder="请输入旧密码" maxlength="11" v-model="oldPwd"/>
				</view>
			</view>
			<view class="update-item">
				<view class="update-title">
					<view>
						新 密 码 :
					</view>
					<input type="text" placeholder="请输入新密码" maxlength="11" v-model="newPwd"/>
				</view>
				
			</view>
			<view class="update-item">
				<view class="update-title">
					<view>
						确认密码:
					</view>
					<input type="text" placeholder="请确认新密码" maxlength="11" v-model="confirmPassword"/>
				</view>
				
			</view>
			<view class="update-btn" @click="confirm">确定</view>
		
		
	</view>
</template>

<script >
	import {updatedPassword} from "../../api/index.js"
	export default {
		data() {
			return {
				oldPwd:"",
				newPwd:"",
				confirmPassword:""
			}
		},
		methods: {
			confirm(){
				if( !this.oldPwd.trim() || !this.newPwd.trim() || !this.confirmPassword.trim() ) {
					uni.showToast({
						icon:'error',
						title:"输入不能为空"
					})
					return;
				}
				if(this.newPwd === this.confirmPassword) {
					// 组合数据把旧密码和新密码发送给后端
					let obj = {
						oldPwd:this.oldPwd,
						newPwd:this.newPwd,
					}
					// 调用接口发送obj
					updatedPassword(obj).then(res=>{
						if(res.data.status === 0){
							uni.showToast({
								title:"修改成功"
							})
							// 清空本地存储的token 和 userInfo
							uni.removeStorageSync("token")
							uni.removeStorageSync("userInfo")
							setTimeout(()=>{
								// 修改成功 跳转到login页面
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},600)
						} else {
							uni.showToast({
								title:"修改失败"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		height: 100vh;
		background:#f2f2f2 ;
			.update-item{
				height: 100rpx;
				margin-bottom: 40rpx;
				padding: 5px;
				.update-title{
					width: 95%;
					height: 120rpx;
					line-height: 80rpx;
					text-align: left;
					background-color: #ffffff;
					margin: 80rpx auto 0;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					view {
						width: 160rpx;
						padding-left: 15rpx;
						// background-color: red;
					}
				}
				input {
					padding-left: 5rpx;
				}
			}
			.update-btn{
				width: 90%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: red;
				margin: 600rpx auto 0;
				border-radius: 40rpx;
				color: #ffffff;
			}
		}
		

</style>
